<template>
  <a-menu
      theme="dark"
      v-model:openKeys="openKeys"
      v-model:selectedKeys="selectedKeys"
      mode="inline"
      @click="handleClick"
      :inline-collapsed="collapsed"
  >
    <template v-for="item in backMenuList" :key="item.path">
      <template v-if="!item.children || item.children.length === 0">
        <a-menu-item v-if="!item.meta?.hideMenu" :key="item.path">
          <Icon v-if="item.meta?.icon" :icon="item.meta?.icon" :size="18" />
          <span style="color: #fff">{{ item.meta.title }}</span>
        </a-menu-item>
      </template>
      <template v-else>
        <template v-if="!item.meta?.hideMenu">
          <template v-if="item.children.length === 1 && (item.children[0].meta?.hideMenu)">
            <a-menu-item :key=" item.path+'/'+item.children[0].path">
              <Icon v-if="item.children[0].meta.icon" :icon="item.children[0].meta.icon" :size="18" />
              <span style="color: #fff">{{ item.children[0].meta.title }}</span>
            </a-menu-item>
          </template>
          <template v-else-if="item.children.length === 1 && item.path.endsWith('Parent')">
              <!--后台配置单个路由时没有指定layout，生成路由时会自动加入layout,但是会产生一个children，这里只渲染children菜单即可-->
              <a-menu-item :key=" item.children[0].path">
                <Icon v-if="item.children[0].meta.icon" :icon="item.children[0].meta.icon" :size="18" />
                <span style="color: #fff">{{ item.children[0].meta.title }}</span>
              </a-menu-item>
          </template>
          <template v-else>
            <c-sub-menu :key="item.path" :menu-info="item"/>
          </template>
        </template>
      </template>
    </template>
  </a-menu>
</template>

<script lang="ts">
export default {
  name: "c-menu"
}
</script>
<script lang="ts" setup>

import {useGo} from "/@/hooks/web/usePage";
import {useRouter} from "vue-router";
import {ref, watch} from "vue";
import {ConsoleRoutes} from "/@/router/console";
import {Icon} from "/@/components/Icon";
import CSubMenu from "/@/layouts/components/subMenu.vue";
import {usePermissionStore} from "/@/store/modules/permission";
import {storeToRefs} from "pinia";

const { backMenuList } = storeToRefs(usePermissionStore());
const go = useGo();
const router = useRouter();

function useMenu() {
  const openKeys = ref(['/home/index']);
  const selectedKeys = ref(['/home/index']);
  const collapsed = ref(false);

  //监控
  watch(() => router.currentRoute.value.path, (newValue, oldValue) => {
    selectedKeys.value = [newValue];
  }, {immediate: true})


  function handleClick(val:any) {
    go(val.key)
  }

  return {
    openKeys,
    selectedKeys,
    collapsed,
    handleClick
  }
}

const {openKeys, selectedKeys, collapsed, handleClick} = useMenu();
</script>


<style scoped>

</style>
